<template>
  <my-layout :tabbar-is-show="false" :is-absolute-body="false">
    <template #Navbar>
      <view
        style="width: 100%; height: 100%; display: flex; align-items: center"
      >
        <image
          @click="goback()"
          :src="indexTabBarUrl.navigateBack"
          style="width: 30rpx; height: 30rpx; margin-left: 40rpx"
        />
      </view>
    </template>
    <template #Body>
      <view
        style="
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          background-color: #f8f8f8;
        "
      >
        <view
          style="
            display: flex;
            align-items: center;
            column-gap: 40rpx;
            margin-left: 32rpx;
            font-size: 32rpx;
            line-height: 58rpx;
            margin-top: 32rpx;
          "
        >
          <view
            :class="[tabIndex === 0 ? 'tab-action' : 'tab-wait']"
            @click="toTab(0)"
            >演员</view
          >
          <view
            :class="[tabIndex === 1 ? 'tab-action' : 'tab-wait']"
            @click="toTab(1)"
            >微短剧</view
          >
          <view
            :class="[tabIndex === 2 ? 'tab-action' : 'tab-wait']"
            @click="toTab(2)"
            >大戏</view
          >
        </view>
        <view style="flex: 1; min-height: 0; overflow: hidden; margin: 32rpx">
          <swiper
            :current="tabIndex"
            style="width: 100%; height: 100%"
            @change="swiperChange"
          >
            <swiper-item>
              <scroll-view
                :scroll-y="true"
                :enhanced="true"
                :show-scrollbar="false"
                style="height: 100%"
              >
                <view
                  style="
                    display: grid;
                    grid-template-columns: 332rpx 332rpx;
                    grid-template-rows: 420rpx;
                    grid-auto-rows: 420rpx;
                    column-gap: 22rpx;
                    row-gap: 22rpx;
                  "
                >
                  <actor-component v-for="item of actorList" :actor="item" />
                </view>
              </scroll-view>
            </swiper-item>
            <swiper-item>
              <scroll-view
                :scroll-y="true"
                :enhanced="true"
                :show-scrollbar="false"
                style="height: 100%"
              >
                <view
                  style="display: flex; flex-direction: column; row-gap: 22rpx"
                >
                  <short-component v-for="item of shortList" :short="item" />
                </view>
              </scroll-view>
            </swiper-item>
            <swiper-item>
              <scroll-view
                :scroll-y="true"
                :enhanced="true"
                :show-scrollbar="false"
                style="height: 100%"
              >
                <view
                  style="
                    display: grid;
                    grid-template-columns: 334rpx 334rpx;
                    grid-template-rows: 392rpx;
                    grid-auto-rows: 392rpx;
                    column-gap: 18rpx;
                    row-gap: 18rpx;
                  "
                >
                  <drama-component v-for="item of dramaList" :drama="item" />
                </view>
              </scroll-view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </template>
  </my-layout>
</template>
<script>
import indexTabBarUrl from "@/url/index_tabBar";
import Actor from "@/pages/members/collect/component/actor/index";
import ActorComponent from "@/pages/members/collect/component/actor/index.vue";
import group01 from "@/static/images/group01.jpg";
import xsy2 from "@/static/images/xsy2.jpg";
import xsy3 from "@/static/images/xsy3.jpg";
import Short from "@/pages/members/collect/component/short/index";
import ShortComponent from "@/pages/members/collect/component/short/index.vue";
import DramaComponent from "@/pages/members/collect/component/drama/index.vue";
import Drama from "@/pages/members/collect/component/drama/index";
export default {
  name: "collect",
  components: {
    ActorComponent,
    ShortComponent,
    DramaComponent,
  },
  data() {
    return {
      indexTabBarUrl,
      tabIndex: 0,
      actorList: [
        new Actor("http://llg.qiniu.comeinvip.com/images/zbs.png", "赵本山"),
        new Actor(group01, "小沈阳"),
        new Actor(xsy2, "王晓虎"),
        new Actor(xsy3, "闫光明"),
        new Actor(xsy3, "闫光明"),
        new Actor(xsy3, "闫光明"),
        new Actor(xsy3, "闫光明"),
        new Actor(xsy3, "闫光明"),
        new Actor(xsy3, "闫光明"),
        new Actor(xsy3, "闫光明"),
      ],
      shortList: [
        new Short(
          "https://llg.qiniu.comeinvip.com/FrKTAHQ79XNw8Kef68lLodpSacxC.png",
          34,
          "鹊刀门传奇",
          "由赵本山领衔主演，宋小宝、宋晓峰、文松、程野、杨树林、唐鉴军等主演的武侠情景喜剧《鹊刀门传奇》近日开播，这部本山风格明显的武侠情景喜剧一出手，便是“王炸”。",
          "喜剧",
          40
        ),
        new Short(
          "https://llg.qiniu.comeinvip.com/FrKTAHQ79XNw8Kef68lLodpSacxC.png",
          34,
          "鹊刀门传奇",
          "由赵本山领衔主演，宋小宝",
          "喜剧",
          40
        ),
        new Short(
          "https://llg.qiniu.comeinvip.com/FrKTAHQ79XNw8Kef68lLodpSacxC.png",
          34,
          "鹊刀门传奇",
          "由赵本山领衔主演，宋小宝、宋晓峰、文松、程野、杨树林、唐鉴军等主演的武侠情景喜剧《鹊刀门传奇》近日开播，这部本山风格明显的武侠情景喜剧一出手，便是“王炸”。",
          "喜剧",
          40
        ),
        new Short(
          "https://llg.qiniu.comeinvip.com/FrKTAHQ79XNw8Kef68lLodpSacxC.png",
          34,
          "鹊刀门传奇",
          "由赵本山领衔主演，宋小宝、宋晓峰、文松、程野、杨树林、唐鉴军等主演的武侠情景喜剧《鹊刀门传奇》近日开播，这部本山风格明显的武侠情景喜剧一出手，便是“王炸”。",
          "喜剧",
          40
        ),
        new Short(
          "https://llg.qiniu.comeinvip.com/FrKTAHQ79XNw8Kef68lLodpSacxC.png",
          34,
          "鹊刀门传奇",
          "由赵本山领衔主演，宋小宝、宋晓峰、文松、程野、杨树林、唐鉴军等主演的武侠情景喜剧《鹊刀门传奇》近日开播，这部本山风格明显的武侠情景喜剧一出手，便是“王炸”。",
          "喜剧",
          40
        ),
      ],
      dramaList: [
        new Drama(
          "https://llg.qiniu.comeinvip.com/FkELtrF7YPHoEQHcf28wB7cBi2bM.png",
          "大笑江湖",
          "剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述"
        ),
        new Drama(
          "https://llg.qiniu.comeinvip.com/FkELtrF7YPHoEQHcf28wB7cBi2bM.png",
          "大笑江湖",
          "剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述"
        ),
        new Drama(
          "https://llg.qiniu.comeinvip.com/FkELtrF7YPHoEQHcf28wB7cBi2bM.png",
          "大笑江湖",
          "剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述"
        ),
        new Drama(
          "https://llg.qiniu.comeinvip.com/FkELtrF7YPHoEQHcf28wB7cBi2bM.png",
          "大笑江湖",
          "剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述"
        ),
        new Drama(
          "https://llg.qiniu.comeinvip.com/FkELtrF7YPHoEQHcf28wB7cBi2bM.png",
          "大笑江湖",
          "剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述"
        ),
        new Drama(
          "https://llg.qiniu.comeinvip.com/FkELtrF7YPHoEQHcf28wB7cBi2bM.png",
          "大笑江湖",
          "剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述"
        ),
        new Drama(
          "https://llg.qiniu.comeinvip.com/FkELtrF7YPHoEQHcf28wB7cBi2bM.png",
          "大笑江湖",
          "剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述"
        ),
        new Drama(
          "https://llg.qiniu.comeinvip.com/FkELtrF7YPHoEQHcf28wB7cBi2bM.png",
          "大笑江湖",
          "剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述剧情描述"
        ),
      ],
    };
  },
  methods: {
    goback() {
      uni.navigateBack();
    },
    toTab(index) {
      this.tabIndex = index;
    },
    swiperChange(event) {
      let index = event.detail.current;
      this.tabIndex = index;
    },
  },
};
</script>
<style lang="scss" scoped>
.tab-action {
  width: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fbd632;
  border: 1px solid #fbd632;
  border-radius: 396rpx;
}
.tab-wait {
  width: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 396rpx;
}
</style>
